
<template>
    <div id="jurisdictionManage">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="角色管理" name="first">
                <roleManage></roleManage>
            </el-tab-pane>
            <el-tab-pane label="用户管理" name="second">
                <user-Manage></user-Manage>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<style lang="scss" scoped>
#jurisdictionManage{
    flex: 1;
    padding: 20px;
    background-color: #f0f2f5;
    .el-tabs{
        height: 100%;
        padding: 24px;
        border-radius: 2px;
        background-color: white;
        display: flex;
        flex-direction: column;
    }
    ::v-deep.el-tabs__content{
        flex: 1;
    }
    ::v-deep.el-tab-pane{
        width: 100%;
        height: 100%;
    }
    ::v-deep.el-tabs__item{
        border: 1px solid #bbb;
    }
    ::v-deep.el-tabs__item.is-active{
        color: #000;
        border: none;
        border-top: 2px solid blue;
    }
    ::v-deep.el-tabs--card>.el-tabs__header{
        border: none;
    }
    ::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav{
        border: none;
    }
    
}
</style>
<script>
// import $ from 'jquery'
import userManage from '@/viewsF/jurisdictionManage/userManage'
import roleManage from '@/viewsF/jurisdictionManage/roleManage'
export default {
    props: {
        // 名称，类型
        // isCollection: Boolean,
    },
    components:{
        userManage,
        roleManage
    },
    data(){
        return{
            activeName: 'first'
        }
    },
    methods:{
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },
    created(){},
    mounted(){},
}
</script>